import React from 'react'
import PropTypes from 'prop-types'
import TodoItem from './TodoItem'

class TodoList extends React.Component {
  componentDidMount(){
    if(this.props.hasFetched == false){
      this.props.actions.makeFetchTodo()
    }
  }
  render(){
    return (
      <ul className="todo-list">
      {this.props.filteredTodos.map(todo =>
        <TodoItem key={todo.id} todo={todo} {...this.props.actions} />
      )}
    </ul>)
  }
}

TodoList.propTypes = {
  filteredTodos: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired
  }).isRequired).isRequired,
  actions: PropTypes.object.isRequired,
  hasFetched: PropTypes.bool.isRequired
}

export default TodoList
